<template>
    <div class="search-input">
        <!-- input -->
        <el-select
            v-model="searchText"
            :multiple="multiple"
            reserve-keyword
            filterable
            :placeholder="placeholder"
            :remote="!!api"
            :remote-method="getListData"
            :loading="data.loading"
            :disabled="disabled"
            @change="selectItem"
        >
            <template :data="v">
                <el-option v-if="all" label="全部" value="" />
                <el-option
                    v-for="(v, i) in data.list"
                    :key="i"
                    :label="v[selectLabel]"
                    :value="v[selectValue || selectLabel]"
                />
            </template>
        </el-select>
        <span v-if="suffix" class="icon-suffix" @click.stop="iconClick">
            <i :class="suffix"></i>
        </span>
    </div>
</template>

<script>
let st;
export default {
    props: {
        // v-modal绑定的值
        value: {
            type: String,
            default: "",
        },
        // 接口地址
        api: false,
        // 接口参数
        params: {
            type: Object,
            default: () => {
                return {
                    pageNum: 1,
                    pageSize: 10,
                };
            },
        },
        // 查询字段名
        searchKey: {
            type: String,
            default: "",
        },
        // 空提示
        placeholder: {
            type: String,
            default: "",
        },

        // select option 的名字
        selectLabel: {
            default: "label",
            type: String,
        },
        // select option 的值
        selectValue: {
            default: "",
            type: String,
        },
        option: Array,
        // 右侧图标
        suffix: {
            type: String,
            default: "",
        },
        selectWidth: {
            type: String,
            default: "100%",
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        all: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
        value(v) {
            let { selectLabel, selectValue, data } = this;
            if (selectLabel && selectValue && selectLabel != selectValue) {
                data.list.forEach((item) => {
                    item[selectValue] == v &&
                        (this.searchText = item[selectLabel]);
                });
            } else {
                this.searchText = v;
            }

            if (!v) {
                this.data.selected = {};
                this.searchText = "";
            }
        },
        option(v) {
            this.data.list = v;
        },
    },
    created() {
        this.searchText = this.value;
        this.getListData();
    },
    computed: {
        selectActive() {
            return (v) => {
                let { selectValue, selectLabel, data } = this;
                return (
                    v[selectValue || selectLabel] ==
                    data.selected[selectValue || selectLabel]
                );
            };
        },
    },
    data: () => {
        return {
            // 数据
            data: {
                // select list
                list: [],
                // 已选
                selected: {},
                loading: false,
                show: false,
            },
            searchText: "",
        };
    },
    methods: {
        getListData(v) {
            let { params, searchKey, selectLabel, option, api } = this;
            if (!api && option) {
                this.data.list = option;
                return false;
            }

            //  组装检索条件
            params = params || {};
            params[searchKey] = v;

            return (
                api &&
                this.api(params)
                    .then((res) => {
                        let { rows } = res;
                        this.data.list = rows || [];
                        this.data.loading = false;
                    })
                    .catch(() => {
                        this.loading = {
                            select: false,
                        };
                    })
            );
        },
        // 尾部icon点击事件
        iconClick() {
            this.$emit("iconClick");
        },
        // 点击某一个item
        selectItem(e) {
            e = String(e);
            this.$emit("input", e);
            this.$emit("change", e);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.search-input {
    position: relative;
    z-index: 10;
    font-size: 14px;
    .icon-suffix {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 100%;
        cursor: pointer;
        color: #999;
    }
}
</style>